﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/vue.js"></script>
    <script src="~/Scripts/axios.js"></script>
    <script src="~/Scripts/ElementUI/element-ui.js"></script>
    <link href="~/Content/ElementUI/element-ui.css" rel="stylesheet" />
</head>
<body>
    <div id="app">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="航班号">
                <el-input v-model="formInline.flightNo"></el-input>
            </el-form-item>
            <el-form-item label="出发机场">
                <el-select v-model="formInline.departureAirport" placeholder="活动区域">
                    <el-option v-for="type in typeList" :label="type.airportName" :value="type.aId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="onSubmit()">查询</el-button>
            </el-form-item>
        </el-form>

        @* 表格 *@
        <el-table :data="tableData"
                  border
                  style="width: 100%">
            <el-table-column prop="fId"
                             label="序号"
                             width="180">
            </el-table-column>
            <el-table-column prop="flightNo"
                             label="航班号"
                             width="180">
            </el-table-column>
            <el-table-column prop="airportname"
                             label="出发机场">
            </el-table-column>
            <el-table-column prop="arriveAirportname"
                             label="到达机场">
            </el-table-column>
            <el-table-column prop="departureTime"
                             label="出发时间">
            </el-table-column>
            <el-table-column prop="arriveTime"
                             label="到达时间">
            </el-table-column>
            <el-table-column prop="price"
                             label="价格">
            </el-table-column>
            <el-table-column prop="meals"
                             label="是否有餐食">
            </el-table-column>


            <el-table-column label="操作">
                <template slot-scope="scope ">
                    <el-button type="success" v-on:click="edit(scope.row.fId)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        @* 分页 *@
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="page"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="100"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="count">
        </el-pagination>

        @* 编辑 *@
        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <el-form :model="editform">
                <el-form-item label="航班号" :label-width="formLabelWidth">
                    <el-input v-model="editform.flightNo" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="出发机场">
                    <el-select v-model="editform.departureAirport" placeholder="活动区域">
                        <el-option v-for="type in typeList" :label="type.airportName" :value="type.aId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出发时间" :label-width="formLabelWidth">
                    <el-input v-model="editform.departureTime" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格" :label-width="formLabelWidth">
                    <el-input v-model="editform.price" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="confirmedit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <script>
        var air = new Vue({
            el: "#app",
            data: {
                formInline: {
                    flightNo: '',
                    departureAirport: ''
                },
                typeList: [],
                tableData: [],
                page: 1,
                limit: 5,
                count: 0,
                editform: {
                    flightNo: '',
                    departureAirport: '',
                    departureTime: '',
                    price: ''},
                dialogFormVisible: false,
                formLabelWidth:"120px"
            },
            methods: {
                handleSizeChange(val) {
                    this.limit = val;
                    this.GetPageList();
                },
                handleCurrentChange(val) {
                    this.page = val;
                    this.GetPageList();
                },
                onSubmit() {
                    this.GetPageList();
                },
                GetList() {
                    let _this = this;
                    axios.get('/Home/GetList')
                        .then(function (res) {
                            _this.typeList = res.data;
                        }).catch(function (res) {

                        });
                },
                GetPageList: function () {
                    let _this = this;
                    axios.post('/Home/GetPageList', {
                        page: _this.page,
                        limit: _this.limit,
                        flightNo: _this.formInline.flightNo,
                        departureAirport: _this.formInline.departureAirport
                    }).then(function (res) {
                        _this.tableData = res.data.data;
                        _this.count = res.data.count;
                        }).catch(function (res) {

                        });
                },
                edit(fId) {
                    let _this = this;
                    this.dialogFormVisible = true;
                    axios.get('/Home/GetEditData?fId=' + fId)
                        .then(function (res) {
                            _this.editform = res.data.data;
                            console.log(res.data)
                        }).catch(function (res) {

                        });
                }
                ,
                confirmedit() {
                    let _this = this;
                    axios.post('/Home/update', _this.editform)
                        .then(function (res) {
                            if (res.data.code == 0) {
                                _this.$message.success("更新成功")
                                _this.GetPageList();
                                _this.dialogFormVisible = false
                            } else {
                                _this.$message.success("更新失败")
                            }
                        }).catch(function (res) {

                        });
                }
            },
            created() {
                this.GetList()
            },
            mounted() {
                this.GetPageList();
            }
        })

    </script>
</body>
</html>
